<template>
  <div class="container">
    <nav-bar></nav-bar>
    <div class="item-box">
      <div class="search-box">
        <div class="left-box">
          <pub-area
          :maxSelectLevel="3"
          @change="changeArea"
          customRightIcon
          label=""
          :isLink="false"
          valueIsLast
          ></pub-area>
        </div>
      </div>
      <div class="content-box">
        <div class="left-img">
          <img src="../../../assets/img/view/yljgcwzs.png" alt="" />
        </div>
        <div class="label">养老机构床位总数（张）</div>
        <div class="value">
          <count-to
            :startVal="0"
            :endVal="Number(state.info.total)"
            :decimals="0"
            :duration="2000"
          ></count-to>
        </div>
      </div>
    </div>
    <div class="item-box">
      <div class="title-box2">
        <div class="left-title">养老机构床位使用情况</div>
      </div>
      <div class="chart-box" ref="chart"></div>
    </div>
    <div class="item-box">
      <div class="title-box2">
        <div class="left-title">养老机构床位类型</div>
      </div>
      <ul class="content-item-box">
        <li>
          <div class="item-left-img">
            <img src="../../../assets/img/view/hlcw.png" alt="" />
          </div>
          <div class="item-text">护理床位（个）</div>
          <div class="item-value">
            <count-to
              :startVal="0"
              :endVal="Number(state.info.type1)"
              :decimals="0"
              :duration="2000"
            ></count-to>
          </div>
        </li>
        <li>
          <div class="item-left-img">
            <img src="../../../assets/img/view/ylcw.png" alt="" />
          </div>
          <div class="item-text">医疗床位（个）</div>
          <div class="item-value">
            <count-to
              :startVal="0"
              :endVal="Number(state.info.type2)"
              :decimals="0"
              :duration="2000"
            ></count-to>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, onMounted, inject } from 'vue'
import { getYLFWCWQY } from '@/api/xcc'
import router from '@/router/index'
import { useUserStore } from '@/pinia/modules/user'
import { useRouter } from 'vue-router'
import { CountTo } from 'vue3-count-to'
import * as echarts from 'echarts'

var option
const chart = ref()
const state = reactive({
  info: {},
  form: {
    areaCode: useUserStore().userLastArea
  }
})

const changeComponents = inject('changeComponents')

const initChart = data => {
  let chartDom = chart.value
  let totalNum = data.notUseNum + data.useNum
  var myChart = echarts.init(chartDom)
  option = {
    title: {
      // text:totalNum,
      // textStyle:{
      //   fontSize: 15,
      //   fontWeight: 'bolder',
      //   color: '#333',
      //   align:'left'
      // },
      // x:
      //   totalNum >= 10 && totalNum <= 99
      //     ? '36%'
      //     : totalNum < 10
      //     ? '37%'
      //     : totalNum > 99 && totalNum <= 999
      //     ? '34%'
      //     : '33%', //X坐标
      // y: '39%', //Y坐标
      // subtext: '总床位', //副标题
      // subtextStyle: {
      //   //副标题样式
      //   fontSize: 15,
      //   fontWeight: 'bolder',
      //   color: '#333',
      //   align:'center'
      // }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      right: '3%',
      top: 'center',
      width: '100'
      //   left: 'center'
    },
    series: [
      {
        name: '养老机构床位使用情况',
        type: 'pie',
        radius: ['30%', '50%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          formatter: '{d}%',
          fontSize: 15
        },
        itemStyle: {
          borderRadius: 0,
          borderColor: '#fff',
          borderWidth: 5
        },
        data: [
          { value: data.useNum, name: '已使用' },
          { value: data.notUseNum, name: '未使用' }
        ],
        emphasis: {
          scale: true, //是否开启高亮后扇区的放大效果。
          scaleSize: 15 //高亮后扇区的放大尺寸，在开启 emphasis.scale 后有效。
        }
      }
    ],
    backgroundColor: '#fff',
    color: ['#2E65FD', '#FEC02A']
  }

  option && myChart.setOption(option)
  myChart.dispatchAction({
    type: 'highlight',
    name: '已使用' //可以通过name指定，或者数据项的 index
  })
}

const changeArea = val => {
  state.form.areaCode = val
  getData()
}

const getData = async () => {
  let res = await getYLFWCWQY(state.form)
  if (res.succeed) {
    state.info = res.data
    initChart(res.data)
  }
}

onMounted(() => {
  getData()
})
onBeforeMount(() => {})
</script>
<style lang="less" scoped>
.container {
  background-color: #f8f8f8;
  padding-top: 20px;
  .item-box {
    background-color: #fff;
    .search-box {
      display: flex;
      height: 90px;
      width: 100%;
      border-bottom: 1px solid #e6e6e6;
      justify-content: space-between;
      .left-box {
        height: 100%;
        :deep(.van-cell) {
          width: 220px;
          height: 100%;
          input {
            // max-width: 400px;
          }
        }
      }
      .right-box {
        height: 100%;
        margin-right: 40px;
        .text {
          line-height: 90px;
          font-size: 30px;
          font-weight: 400;
          color: #4375e4;
        }
      }
    }
    .content-box {
      padding: 30px 40px;
      display: flex;
      align-items: center;
      .left-img {
        width: 97px;
        height: 97px;
        img {
          width: 97px;
          height: 97px;
        }
      }
      .label {
        margin-left: 20px;
        font-size: 24px;
        font-family: PingFang SC;
        color: #333333;
      }
      .value {
        text-align: right;
        flex: 1;
        font-size: 36px;
        font-family: PingFang SC;
        color: #333333;
      }
    }
    .title-box2 {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      padding: 0px 40px;
      height: 90px;
      border-bottom: 1px solid #e6e6e6;
      .left-title {
        font-family: Microsoft YaHei;
        color: #000000;
        line-height: 90px;
        font-size: 30px;
        font-weight: bold;
      }
      .right-title {
        font-size: 24px;
        font-weight: 500;
        color: #999999;
      }
    }
    .content-item-box {
      li {
        margin: 0 40px;
        display: flex;
        height: 110px;
        align-items: center;
        border-bottom: 2px dashed #959595;
        &:last-child {
          border-bottom: none;
        }
        .item-left-img {
          img {
            width: 51px;
          }
        }
        .item-text {
          margin-left: 20px;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #000000;
        }
        .item-value {
          flex: 1;
          text-align: right;
          font-size: 36px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: #000000;
        }
      }
    }
    .chart-box {
      height: 450px;
    }
  }
}
</style>
